<template>
  <div class="login-container">
    <div class="login-header">
      <h1>litemall-vue</h1>
    </div>
    
    <div class="login-form">
      <van-field
        v-model="user"
        class="login-input"
        placeholder="请输入测试账号 user123"
        :left-icon="userIcon"
        clearable
      />
      
      <van-field
        v-model="pwd"
        type="password"
        class="login-input"
        placeholder="请输入测试密码 user123"
        :left-icon="passwordIcon"
      />
      
      <div class="login-links">
        <span class="register-link">免费注册</span>
        <span class="forgot-link">忘记密码</span>
      </div>
      
      <van-button 
        round 
        block 
        type="primary" 
        class="login-btn"
        @click="onLogin"
      >
        登录
      </van-button>
    </div>
    
    <div class="login-footer">
      技术支持: litemall
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { postLogin } from "../api";

import userIcon from "@/assets/user-icon.png";
import passwordIcon from "@/assets/password-icon.png";

let router = useRouter();
const user = ref("");
const pwd = ref("");

const onLogin = async () => {
  try {
    let {errno, data, errmsg} = await postLogin({ 
      username: user.value, 
      password: pwd.value 
    });
    
    if(errno == 0){
      showNotify({ type: 'success', message: errmsg });
      localStorage.setItem("userInfo", JSON.stringify(data));
      router.replace("/");
    }
    if(errno == 700) {
      showNotify({ type: 'warning', message: errmsg });
    }
    
  } catch (error) {
    showNotify({ type: 'danger', message: error });
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

.login-header {
  margin-bottom: 40px;
  text-align: center;
}

.login-header h1 {
  font-size: 24px;
  color: #333;
  font-weight: normal;
}

.login-form {
  width: 100%;
  max-width: 320px;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.login-input {
  margin-bottom: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.login-input :deep(.van-field__left-icon) {
  margin-right: 10px;
}

.login-links {
  display: flex;
  justify-content: space-between;
  margin: 15px 0 25px;
  font-size: 14px;
}

.register-link {
  color: #1989fa;
  cursor: pointer;
}

.forgot-link {
  color: #999;
  cursor: pointer;
}

.login-btn {
  margin-top: 10px;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  border: none;
  height: 44px;
  font-size: 16px;
}

.login-footer {
  margin-top: 40px;
  color: #999;
  font-size: 12px;
}
</style>